iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 25
0
Modern Web

使用 Django 開發網頁系統系列 第 25

[Day 25] 分頁 pagination

  • 分享至 

  • xImage
  •  

今天來講分頁功能
如果有很多比資料

不要一次顯示太多筆,一次只顯示10筆 用下一頁上一頁
https://docs.djangoproject.com/en/2.0/topics/pagination/

Paginator(<obj>, 10) 第二個餐數一次顯示10筆

store/views.py

...
def category(request):
    categorys = Category.objects.all().order_by('id')
    paginator = Paginator(categorys, 10)
    page = request.GET.get('page')
    categorys = paginator.get_page(page)
    return render(request, 'store/category.html', {'categorys': categorys})
...

store/templates/store/category.html

...
<div class="pagination">
    <span class="step-links">
        {% if categorys.has_previous %}
            <a href="?page=1">« first</a>
            <a href="?page={{ categorys.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ categorys.number }} of {{ categorys.paginator.num_pages }}.
        </span>

        {% if categorys.has_next %}
            <a href="?page={{ categorys.next_page_number }}">next</a>
            <a href="?page={{ categorys.paginator.num_pages }}">last »</a>
        {% endif %}
    </span>
</div>
...

就完成了

如果要快速新增測試資料,可以跑forloop

    for i in range(40):
        Category.objects.create(name='test'+str(i))

示意圖
https://ithelp.ithome.com.tw/upload/images/20180114/20107183bKNLATXcu1.png

加點bootstrap 樣式吧

store/templates/store/category.html

<ul class="pagination">
    {% if categorys.has_previous %}
      <li class="page-item">
        <a class="page-link" href="?page=1">« first</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="?page={{ categorys.previous_page_number }}">previous</a>
      </li>
    {% endif %}

    {% for i in categorys.paginator.page_range %}
      <li class="page-item {% if i == categorys.number %} active{% endif %}">
        <a class="page-link" href="?page={{ i }}">{{ i }}</a>
      </li>
    {% endfor %}

    {% if categorys.has_next %}
      <li class="page-item">
        <a class="page-link" href="?page={{ categorys.next_page_number }}">next</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="?page={{ categorys.paginator.num_pages }}">last »</a>
      </li>
    {% endif %}

  </ul>

示意圖
https://ithelp.ithome.com.tw/upload/images/20180114/20107183xw9HMGLKCZ.png

樣式就完成了


上一篇
[Day 24] 註冊
下一篇
[Day 26] Deploy
系列文
使用 Django 開發網頁系統30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言